<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
    <title>Title</title>
    <style>
        *{

        }
        .p a{
            width: 40px;
            height: 40px;
            display: inline-block;
            line-height: 45px;
            text-align: center;
            border-radius: 50%;
            background-color: aqua;
            color: darkorange;
            font-size: 6px;
        }
        .p a:hover{
            background-color: aquamarine;
            color: coral;
        }
        #ding{
            /*width: 100%;*/
            position: fixed;
            bottom: 0px;
            left: 0px;
            right: 0px;
            margin: 0px;
            background-color: white;
        }
    </style>
</head>
<body>
    <table border="1" cellspacing="0" cellpadding="10" align="center">
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>性别</th>
            <th>爱好</th>
            <th>城市</th>
            <th>介绍</th>
        </tr>

       <c:forEach items="${requestScope.page.list}" var="user" varStatus="stat">
           <tr>
               <td>${ (page.page-1)*page.size+stat.index + 1}</td>
               <td>${user.username}</td>
               <td>${user.gender}</td>
               <td>${user.hobby}</td>
               <td>${user.city}</td>
               <td> <c:out value="${user.introduce}"/> </td>
           </tr>
       </c:forEach>
    </table>

<p id="ding" class="p" style="text-align: center;">一共${page.total}条数据 一共${page.last}页 每页显示 <select onchange="tiao(1)" name="size" id="sizeId">
    <option value="2" ${page.size == '2'?'selected':''}>2</option>
    <option value="5" ${page.size == '5'?'selected':''}>5</option>
    <option value="10" ${page.size == '10'?'selected':''}>10</option>
    <option value="20" ${page.size == '20'?'selected':''}>20</option>
</select> 条数据

    <a href="javaScript:void(0);" onclick="tiao(1)">首页</a>

    <a href="javaScript:void(0);" onclick="tiao(${page.prve})">上一页</a>

    <c:forEach begin="${page.start}" end="${page.end}" var="num">
        <c:if test="${num==page.page}">
            ${num}
        </c:if>
        <c:if test="${num!=page.page}">
            <a href="javaScript:void(0);" onclick="tiao(${num})">${num}</a>
        </c:if>
    </c:forEach>
    <a href="javaScript:void(0);" onclick="tiao(${page.next})">下一页</a>
    <a href="javaScript:void(0);" onclick="tiao(${page.last})">尾页</a>
    跳转到 <input value="${page.page}" type="number" max="20" min="1" step="1" name="page" id="page" onchange="huan(this)"/> 页 </p>
</body>

<script>
    function tiao(page) {
        var select = document.getElementById("sizeId");
        var size = select.value;
        location.assign("${pageContext.request.contextPath}/page?page="+page+"&size="+size);
    }

    function huan(obj) {
       var page =  obj.value;
       if(page > ${page.last}){
           page = ${page.last}
       }
       tiao(page);
    }

</script>

</html>
